<template>
	<Row class="box">
		<Col span="12">
		<Form ref="myform" :model="myform" :rules="rules" inline>
			<Row>
				<RadioGroup v-model="type" @change="onChange">
					<Radio :label="0">栏目1</Radio>
					<Radio :label="1">栏目2</Radio>
				</RadioGroup>
			</Row>
			<Row>
				<FormItem label="栏目1" prop="name">
					<Input v-model="myform.name" number placeholder="测试"></Input>
					{{ myform.name }}
				</FormItem>
			</Row>
			<Row>
				<other v-model:other="myform.other"></other>
				{{ myform.other }}
			</Row>
			<Row>
				<Button type="default" @click="show">显示</Button>
			</Row>
		</Form>
		</Col>
	</Row>
	<Row>
		<Input v-model="a" number placeholder=""></Input>
		<Input v-model="b" number placeholder=""></Input>
		{{ c }} : {{ other }} : {{ some }}
	</Row>
</template>
<script>
import other from './250930_1.vue'
export default {
	components: {
		other
	},
	data() {
		return {
			a: 1,
			b: 2,
			myform: {
				name: '',
				other: {
					a: 1,
					b: 2
				}
			},
			type: 0,
			rulesType: {
				check1: [{
					type: 'number',
					required: true,
					message: '必填',
					trigger: 'blur',
				}, {
					type: 'number',
					min: 1,
					max: 9,
					message: '范围1-9之间',
					trigger: 'blur'
				}],
				check2: [{
					required: true,
					message: '必填1',
					trigger: 'blur',
				}]
			},
			rules: {
				name: '',
			}
		}
	},
	computed: {
		c() {
			return this.a + this.b;
		},
		'other': function () {
			return this.a + this.b;
		},
		'some': function () {
			return this.getCheckType();
		},
		rules() {
			return {
				name: {
					a: 1,
					b: 2
				}
			}
		}
	},
	watch: {
		'type': {
			handler(newValue) {
				this.rules.name = this.getCheckType();
			},
			immediate: true
		},
	},
	methods: {
		timeInterval() {
		},
		getCheckType() {
			let check = null;
			if (this.type == 0) {
				check = this.rulesType.check1;
			} else {
				check = this.rulesType.check2;
			}
			return check;
		},
		show() {
			console.log(this.myform);
		},
		add() {
			console.log(`helloworld`);
		},
		onChange(e) {
			console.log(e);
		}
	},
	mounted() {
	}
}
</script>
<style lang="scss" scoped></style>